<template>
    <div>
        <div class="recommend-title">热销推荐</div>
        <ul>
            
                <router-link 
                tag='li' 
                :to="'/detail/' + item.id"
                :key="item.id"
                class="item border-bottom" 
                v-for="(item) of list"> 
                
                    
                    <img class="item-img" :src="item.imgUrl" alt="">
                    
                    <div class="item-info">
                        <p class="item-title">{{item.title}}</p>
                        <p class="item-desc">{{item.desc}}</p>
                        <button class="item-button">查看详情</button>
                    </div>
                </router-link>
            </router-link>    
        </ul>
    </div>
</template>

<script>
   export default {
       name:'HomeRecommend',
       props:{
           list:Array
       },
       

   } 
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl';
.recommend-title
    margin-top:.2rem
    line-height :.8rem
    background :#eee
    text-indent:.2rem
.item
    display:flex
    height 1.9rem
    overflow:hidden
    // background red   
    .item-img
        width: 1.7rem
        height :1.7rem
        padding:.1rem
    .item-info
        flex:1
        padding:.1rem
        min-width :0
        .item-title
            line-height :.54rem
            font-size :.32rem
            ellipsis()
        .item-desc
            line-height :.4rem
            color:#ccc  
            ellipsis()  
        .item-button
            background #ff9300
            padding: 0 .1rem
            border-radius: .06rem
            margin-top:.16rem
            color:#fff
            line-height .44rem
</style>
